@using Radzen.Blazor
@using Radzen.Blazor.Rendering

<EditorDropDown Title=@Title Value=@Editor.State.FormatBlock Change=@OnChange Placeholder="Format block" PopupStyle="width: 200px; max-height: 200px; overflow: auto;">
    <EditorDropDownItem Text="Normal" Value="p">
        <p style="margin:0">@context.Text</p>
    </EditorDropDownItem>
    <EditorDropDownItem Text="Heading 1" Value="h1">
        <h1>@context.Text</h1>
    </EditorDropDownItem>
    <EditorDropDownItem Text="Heading 2" Value="h2">
        <h2>@context.Text</h2>
    </EditorDropDownItem>
    <EditorDropDownItem Text="Heading 3" Value="h3">
        <h3>@context.Text</h3>
    </EditorDropDownItem>
    <EditorDropDownItem Text="Heading 4" Value="h4">
        <h4>@context.Text</h4>
    </EditorDropDownItem>
    <EditorDropDownItem Text="Heading 5" Value="h5">
        <h5>@context.Text</h5>
    </EditorDropDownItem>
    <EditorDropDownItem Text="Heading 6" Value="h6">
        <h6>@context.Text</h6>
    </EditorDropDownItem>
</EditorDropDown>
@code {
    [CascadingParameter]
    public RadzenHtmlEditor Editor { get; set; }

    [Parameter]
    public string Title { get; set; } = "Text style";

    async Task OnChange(string value)
    {
        await Editor.ExecuteCommandAsync("formatBlock", value);
    }
}
